<style>
	.ui-autocomplete-loading { background: white url('http://jqueryui.com/demos/autocomplete/images/ui-anim_basic_16x16.gif') right center no-repeat; }
	</style>
	<script>
	$(function() {
		var cache = {},
			lastXhr;
		$( "#username" ).autocomplete({
			minLength: 2,
			source: function( request, response ) {
				var term = request.term;
				if ( term in cache ) {
					response( cache[ term ] );
					return;
				}

				lastXhr = $.getJSON( "_javascript/ajax_searchuser.php", request, function( data, status, xhr ) {
					cache[ term ] = data;
					if ( xhr === lastXhr ) {
						response( data );
					}
				});
			}
		});
	});
	</script>
	<script>
	$(function() {
		$( "#slider-range-max" ).slider({
			range: "max",
			min: 1,
			max: 5,
			slide: function( event, ui ) {
				$( "#amount" ).val( ui.value );
			}
		});
		$( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
	});
	</script>
<form method="post">
<article class="module width_full">
    <header><h3>{#add_donation#}</h3></header>
    <div class="module_content">
        <fieldset>
            <label>{#username#}</label>
            <input type="text" id="username" name="username" autocomplete="off" value="">
        </fieldset>
        <fieldset>
            <label>{#stars#}</label>
			<div style="clear:both">
			<input type="text" id="amount" style="width:30px;" name="stars" readonly/>
			<div style="float:left; width:200px;">
			<div id="slider-range-max"></div>
			</div>
			
        </fieldset>
        <fieldset >
            <label>{#reason#}</label>
            <input type="text" name="reason" value="" >
        </fieldset>
			<div class="clear"></div>
    </div>
    <footer>
        <div class="submit_link">
            <input type="submit" value="{#submit#}"  name="submit" class="alt_btn">
        </div>
    </footer>
</article>
</form>

<div class="modal" id="addet">
        <h3>{#addet#}</h3>
		<p>{#success_addet#}</p>
</div>